<template>
  <div class="home">
    <div class="Carousel">
      <el-carousel height="466px">
        <el-carousel-item>
          <img src="https://rs.dance365.com/photo/1667210329871.jpg">
        </el-carousel-item>
        <el-carousel-item>
          <img src="https://rs.dance365.com/photo/1667373574669.jpg">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="card-list">
      <div class="channel-list">
        <div class="channel-scroll">
          <router-link :class="{ active: $route.path == '/home/recommend' }" class="channel-item" to="/home/recommend">
            推荐
          </router-link>
          <router-link :class="{ active: $route.path == '/home/production' }" class="channel-item"
            to="/home/production">作品
          </router-link>
          <router-link :class="{ active: $route.path == '/home/course' }" class="channel-item" to="/home/course">教程
          </router-link>
          <router-link :class="{ active: $route.path == '/home/soecial' }" class="channel-item" to="/home/soecial">专题
          </router-link>
          <router-link :class="{ active: $route.path == '/home/dynamic' }" class="channel-item" to="/home/dynamic">动态
          </router-link>
          <router-link :class="{ active: $route.path == '/home/focus' }" class="channel-item" to="/home/focus">关注
          </router-link>
          <span class="channel-item" v-for="hobby in passHobbyArr" :key="hobby.id">{{hobby.name}}</span>
        </div>
        <span class="right-list" @click="showDialog"> <i class="iconfont icon-yingyong"></i> 选择兴趣技能</span>
      </div>
      <div class="content-list">
        <div class="content">
          <router-view />
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogFormVisible" :title="``" width="1040px" :before-close="handleClose">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header" v-if="!searchData.length">
          <h4 :id="titleId" :class="titleClass">{{ `选择我的兴趣技能 ${hobbyArr.length} / 7` }}</h4>

        </div>
        <el-button style="border:none; font-size: 18px;" @click="goBack" v-else>
          <el-icon class="el-icon--left">
            <ArrowLeft />
          </el-icon>
          返回
        </el-button>
      </template>
      <span style="color:#b1b5c1; position: relative; top: -40px;">例如舞蹈就选舞种</span>
      <el-form :inline="true">
        <el-form-item>
          <el-input @input="search" v-model="keyword" style="width:300px" placeholder="搜索兴趣技能" size="large" />
        </el-form-item>
        <el-form-item>
          <el-button color="#f5f7f9" :disabled="!keyword.trim().length" type="primary" size="large"
            style="width: 60px; hsearchDataeight: 40px; color: #666;" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <div v-if="!searchData.length">
        <ul v-show="hobbyArr.length" class="hobby-arr">
          <li class="hobby-item" v-for="selHobby in hobbyArr" :key="selHobby.id">
            {{ selHobby.name }}
            <span class="close-icon" @click="delHobby(selHobby)">✖</span>
          </li>
        </ul>
        <div>推荐兴趣技能</div>
        <div class="hobby-list">
          <div class="hobby-list-content">
            <div class="hobby-item" v-for="hobby in allHobbyArr" :key="hobby.id" :title="hobby.name"
              @click="addHobby(hobby)">
              {{ hobby.name }}
              <span v-show="hobby.isSelect" class="select-icon">✔</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div>搜索结果</div>
        <ul class="search-result">
          <li v-for="data in searchData" :key="data.id" @click="addHobby(data)">
            <div class="love">
              <span class="iconfont icon-star"></span>
            </div>
            <div class="content">
              <div>{{ data.name }}</div>
              <span>{{ data.description }}</span>
            </div>
            <div style="line-height:44px;position: absolute;right: 20px;" class="add-icon">
              <span style="font-size:18px;color:#999;font-weight:600" class="iconfont icon-jiahao"></span>
            </div>
          </li>
        </ul>
      </div>

      <template #footer>
        <span class="dialog-footer" v-if="!searchData.length">
          <el-button class="concle" style="width:130px;height:40px" @click="onCancel">取消</el-button>
          <el-button color="#f93684" style="width:130px;height:40px" size="large" type="primary" @click="onSave">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <div class="backTop">
      <el-backtop right="100">
        <div class="backtop">
          <img src="https://rs.dance365.com/img/back_top@3x.e71cd044.png" alt="">
        </div>
      </el-backtop>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Home",
  components: { RouterLink }
}
</script>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref } from 'vue'
import homeApi, { type SearchModel } from '@/api/mockHome'
import { RouterLink } from 'vue-router';
import { debounce } from 'lodash'

//选择兴趣技能逻辑__________
const allHobbyArr = ref([
  {
    "name": "中国舞",
    "id": "ff80808167bef94f0167bf6f6e0a1fd2"
    , "isSelect": false
  },
  {
    "name": "古典舞",
    "id": "402881ed649d628e01649d636ea7005b"
    , "isSelect": false
  },
  {
    "name": "原创编舞",
    "id": "ff80808167d9dd620167e457f899789a"
    , "isSelect": false
  },
  {
    "name": "爵士舞",
    "id": "402881ed649d628e01649d636ea70057"
    , "isSelect": false
  },
  {
    "name": "流行热舞",
    "id": "402881ed649d628e01649d636ea80065"
    , "isSelect": false
  },
  {
    "name": "成人舞蹈",
    "id": "ff8080816960e987016962b2af0f5323"
    , "isSelect": false
  },
  {
    "name": "少儿舞蹈",
    "id": "402881ed649d628e01649d636ea80067"
    , "isSelect": false
  },
  {
    "name": "街舞",
    "id": "402881ed649d628e01649d636ea60056"
    , "isSelect": false
  },
  {
    "name": "民族舞",
    "id": "402881ed649d628e01649d636ea7005a"
    , "isSelect": false
  },
  {
    "name": "热门舞蹈",
    "id": "ff808081683f378701687690e06e66ac"
    , "isSelect": false
  },
  {
    "name": "中国风",
    "id": "ff80808167c026c90167c1fbde74258b"
    , "isSelect": false
  },
  {
    "name": "民族民间舞",
    "id": "ff8080816a9f772a016ab929bd056c95"
    , "isSelect": false
  },
  {
    "name": "基本功",
    "id": "ff80808167effef30167f390c2bf6b63"
    , "isSelect": false
  },
  {
    "name": "肚皮舞",
    "id": "402881ed649d628e01649d636ea7005f"
    , "isSelect": false
  },
  {
    "name": "儿童舞蹈",
    "id": "ff80808167c6b44f0167c9ec35630d8e"
    , "isSelect": false
  },
  {
    "name": "东方舞",
    "id": "ff808081682b399d0168307bc5f64c75"
    , "isSelect": false
  }
])

//是否显示兴趣弹窗
const dialogFormVisible = ref(false)

//是否选中兴趣标签
const isSelect = ref(false)
// 用来选中的渲染兴趣列表的数组
const hobbyArr = ref<any[]>([]);
// 保存搜索的数据
const searchData = ref<SearchModel[]>([]);
// 搜索的关键字
const keyword = ref('')
// 二级菜单元素
const menuRef = ref();
const isShowBackIcon = ref(false);
// 用于中间传递已选中兴趣列表的数组的数据
const passHobbyArr = ref<any[]>([]);

const search = async () => {
  if (!keyword.value.trim().length) return
  try {
    let result = await homeApi.getSearch()
    searchData.value = result
  } catch (error) {
    ElMessage.error('获取搜索结果失败')
  }
}

// 显示对话框的回调
const showDialog = () => {
  dialogFormVisible.value = true;
  hobbyArr.value = [...passHobbyArr.value];


  // 双层遍历找到当前已选择兴趣标签数组中对应的数据,把数据的选中状态改变
  hobbyArr.value.forEach((item: any, index: number) => {
    allHobbyArr.value.forEach((item2: any, index: number) => {
      if (item.name === item2.name) {
        item2.isSelect = true;
      }
    })
  })
}

// 确定按钮的回调
const onSave = () => {
  // 点击保存按钮的时候另存一份
  passHobbyArr.value = hobbyArr.value;
  hobbyArr.value = [];
  // 关闭对话框
  dialogFormVisible.value = false;
  searchData.value = [];
  keyword.value = ''
}
// 取消按钮的回调
const onCancel = () => {
  hobbyArr.value = [];
  // 关闭对话框
  dialogFormVisible.value = false;
  searchData.value = [];
  keyword.value = ''
}
// 返回兴趣标签列表页的回调
const goBack = () => {
  // 清空搜索结果数组和关键字
  searchData.value = [];
  keyword.value = '';
};
// 关闭对话框之前的回调
const handleClose = (done: () => void) => {
  // 关闭之前清除对话框内容
  onCancel();
  done();
}
// 添加兴趣标签
const addHobby = (hobby: any) => {
  if (hobbyArr.value.length === 7 && !hobby.isSelect) {
    ElMessage.error('最多只能添加7个');
    return
  }
  if (hobby.isSelect) {
    // console.log('删除', hobby.isSelect);
    // 修改当前点击的兴趣标签的选中状态
    // hobby.isSelect = false;
    // 删除当前点击的兴趣标签
    hobbyArr.value.forEach((item: any, index: number) => {
      if (item.name === hobby.name) {
        hobbyArr.value.splice(index, 1);
      }
    })
    const allItem = allHobbyArr.value.find(item => item.name === hobby.name);
    if (allItem) {
      allItem.isSelect = false;
    }
  } else {
    // 针对搜索功能判断添加是否重复
    const isRepeat = hobbyArr.value.findIndex(item => item.name === hobby.name);
    if (isRepeat >= 0) {
      alert('已添加');
      return;
    }
    // console.log('增加', hobby.isSelect);
    // 修改当前点击的兴趣标签的选中状态
    hobby.isSelect = true;
    // 向 hobbyArr 数组中添加选中的兴趣标签
    hobbyArr.value.push(hobby);
    // 显示兴趣列表页面
    searchData.value = [];
    // 清空输入框内容
    keyword.value = '';
  }
}

// 删除兴趣标签的回调
const delHobby = (selHobby: any) => {
  addHobby(selHobby);
}


//轮播图数据渲染
// let CarouselList = ref([])

// const getCarousel = async () => {
//   try {
//     let result = await homeApi.getCarousel()
//     CarouselList = result.data
//     console.log(CarouselList)
//   } catch (error) {
//     console.log(error)
//   }
// }

onMounted(() => {
  // getCarousel()
})
</script>

<style scoped lang="scss">
.home {
  /* width: 1200px; */
  margin: 0 auto;
}

/* 轮播图样式 */
.Carousel {
  width: 1200px;
  padding-top: 20px;
  margin: 0 auto;
}

.el-carousel__item img {
  width: 100%;
  height: 100%;
}

::v-deep(.el-carousel__button) {
  width: 12px;
  height: 12px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 10px;
}

/* 视频导航 */
.card-list {}

.channel-list {
  height: 80px;
  height: 100%;
  width: 1200px;
  margin: 0 auto;
  position: relative;
}

.channel-list .channel-scroll {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.channel-list .channel-item {
  padding: 20px 4px;
  margin: 0 20px;
  text-align: center;
  color: #7d8090;
}

.right-list {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  height: 80px;
  line-height: 80px;
  color: rgb(125, 128, 144);
}

.channel-item.active {
  color: #000;
  border-bottom: #000 solid 3px;
}

/* 列表 */
.content-list {
  width: 100%;
  background-color: #f5f7f9;
  margin-top: 10px;
}

.content-list .content {
  width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
}

::v-deep(.el-input .el-input--small .el-input--prefix) {
  background-color: #f5f7f9;
}

::v-deep(.el-input__inner) {
  background-color: #f5f7f9;
}

.el-button.concle:hover {
  color: #F93684;
  border: 1px solid #fb66a2;
  background-color: #FEEBF3
}

.hobby-list {
  margin-top: 15px;
  width: 100%;
  height: 340px;
  // border: 1px solid red;
  overflow: auto;

  .hobby-list-content {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;

    .select-icon {
      position: absolute;
      top: -8px;
      right: -8px;
      text-align: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      line-height: 20px;
      background-color: #F93684;
      color: #fff;
      cursor: pointer;
    }

  }

}

.hobby-arr {
  display: flex;
  padding: 20px 0;
  flex-wrap: wrap;

  .close-icon {
    position: absolute;
    top: -8px;
    right: -8px;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background-color: #aaa;
    color: #fff;
    cursor: pointer;
  }

}

.hobby-item {
  width: 100px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #eaecf0;
  border-radius: 4px;
  margin: 0 22px 21px 0;
  display: inline-block;
  font-size: 12px;
  color: #000;
  text-align: center;
  position: relative;
}

.subPage {
  background-color: #F5F7F9;
  padding: 20px 0;
  width: 1200px;
  margin: 0 auto;
}

.search-result {
  display: flex;
  // justify-content: center;
  flex-wrap: wrap;

  li {
    width: 300px;
    height: 68px;
    background-color: #F5F7F9;
    border-radius: 5px;
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 12px;
    display: flex;
    position: relative;

    &:hover {
      background-color: rgba(0, 0, 0, .1);
    }

    .love {
      width: 44px;
      height: 44px;
      background-color: #FFF;
      text-align: center;
      line-height: 44px;
      margin-right: 10px;
    }

    .content {
      div {
        font-weight: 100;
        font-size: 16px;
        // color: #999;
        margin-bottom: 4px;
      }

      .add-icon {
        height: 44px;
        width: 16px;
        line-height: 44px;
        position: absolute;
        right: 20px;

        .iconfont {
          font-weight: 600;
          margin-top: 14px;
          height: 44px;
          line-height: 44px;
        }
      }

      span {

        font-size: 14px;
        color: #999;
      }
    }

  }

  li:nth-child(3n) {
    margin-right: 0;
  }
}

.backTop {
  height: 40px;
  width: 40px;
  cursor: pointer;

  img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
  }
}

::v-deep(.el-icon .el-dialog__close:hover){
  
    color: #F93684;
}
</style>
